<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="../assets/css/bootstrap.css" rel="stylesheet" />
    <!-- FontAwesome Styles-->
    <link href="../assets/css/font-awesome.css" rel="stylesheet" />
    <link href="../css/pulic.css" rel="stylesheet"/>
    <!-- Google Fonts-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
    <!-- TABLE STYLES-->
    <link href="../assets/js/dataTables/dataTables.bootstrap.css" rel="stylesheet" />
    <link rel="stylesheet" href="../lay/css/layui.css" />
    <link href="../css/authority.css" rel="stylesheet" />
    <script src="../js/jquery-3.2.1/jquery-3.2.1.js"></script>
    <style>
        .row {
            text-align:center;
        }
    </style>
    <script type="text/javascript">
        //加载事件
        $(function(){
            var collection1 = $(".username");
            var collection2 = $(".role");
            $.each(collection1, function(){
                $(this).addClass("start");
            });
            $.each(collection2, function(){
                $(this).addClass("start");
            });
        });
        //点击事件
        function change1(dom){
            var collection1 = $(".username");
            $.each(collection1, function(){
                $(this).removeClass("end");
                $(this).addClass("start");
            });
            $(dom).removeClass("start");
            $(dom).addClass("end");
        }
        function change2(dom){
            var collection2 = $(".role");
            $.each(collection2, function(){
                $(this).removeClass("end");
                $(this).addClass("start");
            });
            $(dom).removeClass("start");
            $(dom).addClass("end");
        }
    </script>
</head>

<body>


<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">

</fieldset>

<table style="width: 100%">
    <tr>
        <td align="center">部门名称</td>
        <td align="center">职级名称</td>
        <td align="center">费用类型金额管理</td>
    </tr>
    <tr>
        <td align="center">
            <div style="display: inline-block; width: 220px; height: 320px; padding: 10px; border: 1px solid #ddd; overflow: auto;" class="user">
                <div><span class="username" onclick="change1(this)">财务部</span></div>
                <div><span class="username" onclick="change1(this)">研发部</span></div>
                <div><span class="username" onclick="change1(this)">人事部</span></div>
                <div><span class="username" onclick="change1(this)">市场部</span></div>
                <div><span class="username" onclick="change1(this)">开发部</span></div>
            </div>
        </td>
        <td align="center">
            <div style="display: inline-block; width: 220px; height: 320px; padding: 10px; border: 1px solid #ddd; overflow: auto;"  class="user">
                <div><span class="role" onclick="change2(this)">总裁</span></div>
                <div><span class="role" onclick="change2(this)">副总裁</span></div>
                <div><span class="role" onclick="change2(this)">主管</span></div>
                <div><span class="role" onclick="change2(this)">组长</span></div>
                <div><span class="role" onclick="change2(this)">助理</span></div>
                <div><span class="role" onclick="change2(this)">正式员工</span></div>
            </div>
        </td>
        <td align="center">
            <div style="display: inline-block; width: 500px; height: 320px; padding: 10px; border: 1px solid #ddd; overflow: auto;">
                        <table class="table table-hover">
                            <thead>
                            <tr>
                                <th>费用类型名称</th>
                                <th>金额</th>
                                <th colspan="2">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>城市间交通费</td>
                                    <td>
                                        <input type="text" style="width: 50px">
                                    </td>
                                    <td>
                                        <a href="#" class="btn btn-primary btn-sm">新增</a>
                                    </td>
                                    <td>
                                        <a href="#" class="btn btn-warning btn-sm">修改</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>市内交通费</td>
                                    <td>
                                        <input type="text" style="width: 50px">
                                    </td>
                                    <td>
                                        <a href="#" class="btn btn-primary btn-sm">新增</a>
                                    </td>
                                    <td>
                                        <a href="#" class="btn btn-warning btn-sm">修改</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>伙食补贴费</td>
                                    <td>
                                        <input type="text" style="width: 50px">
                                    </td>
                                    <td>
                                        <a href="#" class="btn btn-primary btn-sm">新增</a>
                                    </td>
                                    <td>
                                        <a href="#" class="btn btn-warning btn-sm">修改</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>住宿费</td>
                                    <td>
                                        <input type="text" style="width: 50px">
                                    </td>
                                    <td>
                                        <a href="#" class="btn btn-primary btn-sm">新增</a>
                                    </td>
                                    <td>
                                        <a href="#" class="btn btn-warning btn-sm">修改</a>
                                    </td>
                                </tr>
                                <tr>
                                    <td>其他费用</td>
                                    <td>
                                        <input type="text" style="width: 50px">
                                    </td>
                                    <td>
                                        <a href="#" class="btn btn-primary btn-sm">新增</a>
                                    </td>
                                    <td>
                                        <a href="#" class="btn btn-warning btn-sm">修改</a>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
        </td>
    </tr>
</table>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">

</fieldset>

<div class="row" style="margin-left: -53%;">
    <form class="form-inline" >
        <div class="form-group">
            <input type="text" class="form-control" id="exampleInputName2" placeholder="请输入部门名称">
        </div>
        <button type="submit" class="btn btn-primary">+</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <div class="form-group">
            <input type="text" class="form-control" id="exampleInputName3" placeholder="请输入职级名称">
        </div>
        <button type="submit" class="btn btn-primary">+</button>
    </form>
</div>






<script src="../layui.js" charset="utf-8"></script>
<script>

</script>

</body>

</html>